<template>
  <div id="">
    <div class="paT55 containerWrap">
      <div class="leftNaV">
        <div class="tree">
          <el-tree
              :data="groupData"
              node-key="id"
              default-expand-all
              @node-click="treeClick"
              :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, groupData }">
              <span>{{ node.data.name }}</span>
              <span v-if="node.childNodes.length === 0">
                <el-button
                    type="text"
                    @click="() => remove(node,groupData)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
        <el-button type="primary" style="width: 90%;text-align: center;margin: 10px; background-color: rgba(14, 107, 183, 0.9);border: 0;border-radius: 0"  @click="dialogGroup" class="button">新 增</el-button>
        <Corner></Corner>
      </div>
      <div class="rightContent">
        <div class="header">
          <div class="search">
            <el-input clearable @keyup.enter.native="searchLayer" auto-complete="off" class="p-frame" placeholder="请输入图层名称"
                      type="text" v-model="searchName"></el-input>
          </div>
          <el-button type="primary" @click="searchLayer"  class="btn" >查询</el-button>
          <el-button type="primary" @click="addLayerDialog"  class="btn" >新增</el-button>
        </div>
        <el-scrollbar class="scollWrap">
          <div class="forms">
            <el-table ref="multipleTable"
                      :height="elTableH"
                      :header-row-style="HeaderStyle"
                      :row-style='cellStyle'
                      border
                      stripe
                      :data="tableData"
                      style="width: 100%"
            >
              <el-table-column
                  align="center"
                  label="序号"
                  type="index"
                  width="70">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="name"
                  show-overflow-tooltip
                  label="名称">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="groupName"
                  show-overflow-tooltip
                  label="所属图层组">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="proType"
                  show-overflow-tooltip
                  label="图层类型">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="geoType"
                  show-overflow-tooltip
                  label="几何类型">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="proUrl"
                  show-overflow-tooltip
                  label="URL">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="icon"
                  show-overflow-tooltip
                  label="图标">
                <template slot-scope="scope">
                  <img v-if="scope.row.icon != '' && scope.row.icon!=null " :src="loadImg(scope.row.icon)">
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="visible"
                  show-overflow-tooltip
                  label="默认可见">
                <template slot-scope="scope">
                  <span>{{ scope.row.visible ? '是' : '否' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="sortNo"
                  show-overflow-tooltip
                  label="排序">
              </el-table-column>
              <el-table-column
                  align="center"
                  fixed="right"
                  label="查看"
                  width="140">
                <template slot-scope="scope">
                  <span  class="pointer" @click="dialogLayer(scope.row)">修改</span><i class="line"></i><span
                    class="pointer" @click="deleteLayer(scope.row)">删除</span>
<!--                  <el-tooltip class="item" effect="dark" content="修改" placement="top">-->
<!--                    <el-button @click="dialogLayer(scope.row)" type="text">-->
<!--                      <img src="../../../assets/img/home/016.png">-->
<!--                    </el-button>-->
<!--                  </el-tooltip>-->
<!--                  <el-tooltip class="item" effect="dark" content="删除" placement="top">-->
<!--                    <el-button @click="deleteLayer(scope.row)" type="text">-->
<!--                      <img src="../../../assets/img/home/015.png">-->
<!--                    </el-button>-->
<!--                  </el-tooltip>-->
                </template>
              </el-table-column>
            </el-table>
            <div class="footer">
              <div class="paging info">
                <el-pagination
                    :page-size="this.pageSize"
                    :page-sizes="[10,15]"
                    :total="tableDataTotalCount"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    background
                    layout="total, sizes, prev, pager, next">
                </el-pagination>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <Dialog :is-show-dialog="this.dialogFormVisible" @close="close" :title="detailEditType == 'edit' ? '修改图层信息' : '添加图层'" :width="'60%'">
          <div slot="content">
            <el-form :model="layerForm" :rules="rules" ref="ruleAddForm" label-width="100px" class="demo-ruleForm">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="名称" prop="name">
                    <el-input v-model="layerForm.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="标识" prop="layerKey">
                    <el-input v-model="layerForm.layerKey"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="顺序" prop="sortNo">
                    <el-input-number v-model="layerForm.sortNo" :min="1"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="图层类型" prop="proType">
                    <el-select v-model="layerForm.proType" placeholder="请选择">
                      <el-option
                        v-for="(item, j) in layerTypeList"
                        :key="j"
                        :label="item.label"
                        :value="item.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="URL" prop="proUrl">
                    <el-input v-model="layerForm.proUrl"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="图层组" prop="categoryId">
                    <el-select v-model="layerForm.groupId" placeholder="请选择">
                      <el-option
                        v-for="(item, j) in groupList"
                        :key="j"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="默认可见" prop="visible">
                    <el-select v-model="layerForm.visible"  placeholder="请选择">
                      <el-option label="否" :value="false"></el-option>
                      <el-option label="是" :value="true"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="几何类型" prop="name">
                    <el-select v-model="layerForm.geoType" placeholder="请选择">
                      <el-option
                        v-for="(item, j) in geoTypeList"
                        :key="j"
                        :label="item.label"
                        :value="item.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="图标" prop="icon" style="position: relative" v-show="layerForm.geoType=='点'">
                    <img v-if="layerForm.icon != '' && layerForm.icon !=null " :src="loadImg(layerForm.icon)" @click.stop="selectIconShow = true">
                    <el-input v-else  v-model="layerForm.icon" auto-complete="off" readonly @focus="selectIconShow = true" @blur="inputBlur"
                              ref="iconInput"></el-input>
                    <div v-show="selectIconShow" style="position: absolute;left: 0;top: -165px;z-index: 10000;width: 250px;height: 150px;
                    border: 1px solid #fff;background: rgba(14, 107, 183, 0.7);" class="scroll"  @mouseenter="selecting = true" @mouseleave="selecting = false">
                      <el-scrollbar class="page-component_scroll">
                        <div v-for="(item, i) in iconList" :key="i" class="icon" @click.stop="fileSelect(i + 1)">
                          <img style="padding: 5px " :src="item"/>
                        </div>
                      </el-scrollbar>
                      <div class="triangle-down"></div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <hr>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="模型缩放比例" prop="scale" label-width="140px">
                    <el-input v-model="layerForm.scale"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="3D模型URL" prop="model" label-width="140px">
                    <el-input v-model="layerForm.model"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <hr>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="统计名称" prop="statisticName">
                    <el-input v-model="layerForm.statisticName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="统计单位" prop="statisticUnit">
                    <el-input v-model="layerForm.statisticUnit"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="统计图表" prop="sortNo">
                    <el-select v-model="layerForm.statisticChart" placeholder="请选择">
                      <el-option label="无" :value="null"></el-option>
                      <el-option label="饼图" :value="'饼图'"></el-option>
                      <el-option label="柱状图" :value="'柱状图'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="统计SQL">
                    <el-input type="textarea" v-model="layerForm.statisticSql"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="数据行标识" prop="dataKey">
                    <el-input v-model="layerForm.dataKey"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <hr>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="layerForm.remark" :autosize="{ minRows: 5}"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div slot="Footer" style="position: relative;z-index: 9999;text-align: center">
            <el-button v-if="detailEditType == 'edit'" type="primary" @click="updateLayer('ruleAddForm')">修 改</el-button>
            <el-button v-else type="primary" @click="addLayer('ruleAddForm')">新 增</el-button>
            <el-button type="primary" @click="cancelClock">取 消</el-button>
          </div>
        </Dialog>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :title="'新增图层组'" :width="'30%'" :visible.sync="dialogGroupVisible">
      <el-form labelPosition='right' class="select-form" :inline="true" :model="layerGroupData" :rules="rulesGroup" ref="ruleGroupForm">
        <el-form-item label="名称" label-width="140px" prop="name">
          <el-input v-model="layerGroupData.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="顺序" label-width="140px" prop="sortNo">
          <el-input-number :min="1" v-model="layerGroupData.sortNo" auto-complete="off"></el-input-number>
        </el-form-item>
        <el-form-item label="上级图层组" label-width="140px">
          <el-select v-model="layerGroupData.parentId" placeholder="请选择">
            <el-option
              v-for="(item, j) in groupList"
              :key="j"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="full-width-form-2" label="备注" prop="remark" label-width="140px">
          <el-input type="textarea" :autosize="{ minRows: 3}" v-model="layerGroupData.remark" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addLayerGroup('ruleGroupForm')">确 定</el-button>
        <el-button type="primary" @click="dialogGroupVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import geographicApi from '@/api/geographicApi'
import Dialog from '../../../components/Dialog'
import Corner from '../../../components/corner'
export default {
  name: 'geoData',
  components: {
      Dialog, Corner
  },
  data () {
    return {
      // 表格样式
      rulesGroup: {
          name: [ {required: true, message: '请输入图层组名称', trigger: 'blur'} ],
          sortNo: [ {required: true, message: '请输入图层组顺序', trigger: 'blur'} ],
          key: [ {required: true, message: '请输入图层组标识', trigger: 'blur'} ]
      },
      rules: {
          name: [
              {required: true, message: '请输入图层名称', trigger: 'blur'}
          ],
          layerKey: [
              {required: true, message: '请输入图层标识', trigger: 'blur'}
          ],
          sortNo: [
              {required: true, message: '请输入大于2的数字', trigger: 'blur'}
          ]
      },
      geoTypeList: [
          {label: '点', val: 0},
          {label: '线', val: 1},
          {label: '面', val: 2},
          {label: '多点', val: 3},
          {label: '多线', val: 4},
          {label: '多面', val: 5}
      ],
      layerTypeList: [
          {label: '矢量', val: 0},
          {label: '瓦片', val: 1},
          {label: 'WMS', val: 2}
      ],
      elTableH: null,
      cellStyle: {height: '60px', fontSize: '16px'},
      HeaderStyle: {height: '70px', fontSize: '16px'},
      tableData: [],
      dialogFormVisible: false,
      dialogGroupVisible: false,
      selectIconShow: false,
      selecting: false,
      detailEditType: 'detail', // 'edit'
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      searchName: '',
      groupData: [{id: '', name: '图层组', children: []}],
      groupList: [],
      layerGroupData: {},
      groupIds: [],
      layerForm: {},
      iconList: []
    }
  },
  computed: {
    tableDataTotalCount () {
      return this.totalCount ? this.totalCount : 0
    }
  },
  created () {
      this.findPage()
      this.findGroupInfo()
      var length = parseFloat(process.env.MAP_ICON_COUNT) + 1
      for (var i = 1; i < length; i++) {
          var url = require('../../../assets/img/map/mapIcon/' + i + '.png')
          this.iconList.push(url)
      }
  },
  methods: {
    loadImg (url) {
        let imgUrl = '#'
        if (url) {
            imgUrl = require('../../../assets/img/map/mapIcon/' + url)
        }
        return imgUrl
    },
    findPage () {
        geographicApi.findLayerPage({
            name: this.searchName,
            groupIds: this.groupIds,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
        }).then((res) => {
            if (res.status === 200 && res.data.result.rows !== null) {
                this.tableData = res.data.result.rows
                this.totalCount = res.data.result.totalCount
            }
        })
    },
    findGroupInfo () {
        geographicApi.findAll().then((res) => {
            if(res.status === 200 && res.data.result !== null){
                this.groupData[0].children = res.data.result
            }
        })
    },
    pager(val) {
      this.pageIndex = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.tableData = []
      this.findPage()
    },
    handleCurrentChange(val) {
      this.pageIndex = val
      this.tableData = []
      this.findPage()
    },
    cancelClock() {
      this.dialogFormVisible = false
    },
    remove(node,data) {
      let id = node.data.id
      let tips = `此操作将删除: ${node.data.name}图层组,并删除该图层组下的图层,是否继续?`
      this.$confirm(tips, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          geographicApi.deleteLayerGroup(id).then((res) =>{
              if (res.data.messageType === '0') {
                  this.$notify({
                      title: '消息',
                      message: "删除成功",
                      position: 'bottom-right',
                      showClose: false,
                      type: 'success'
                  })
                  this.groupIds = []
                  this.findPage()
                  this.findGroupInfo()
                  this.findGroupList()
              }
          })
      }).catch((error) => {
          console.log(error)
      })
    },
    findGroupList () {
        geographicApi.findList().then((res) => {
            if (res.data.messageType === '0') {
                this.groupList = res.data.result
            }
        })
    },
    dialogGroup () {
        this.findGroupList()
        this.dialogGroupVisible = true
    },
    dialogLayer (row) {
        this.dialogFormVisible = true
        this.detailEditType = 'edit'
        this.findGroupList()
        geographicApi.getLayer(row.id).then((res) => {
            if (res.data.messageType === '0') {
                this.layerForm = res.data.result
            }
        })
    },
    addLayerGroup (ruleGroupForm) {
        this.$refs[ruleGroupForm].validate((valid) => {
            if (valid) {
                let params = Object.assign({}, this.layerGroupData)
                geographicApi.addLayerGroup(params).then((res) => {
                    if (res.data.messageType === '0') {
                        this.$notify({
                            title: '消息',
                            message: ('添加成功!'),
                            position: 'bottom-right',
                            showClose: false,
                            type: 'success'
                        })
                        this.dialogGroupVisible = false
                        this.layerGroupData = {}
                        this.findGroupList()
                        this.findGroupInfo()
                    }
                })
            } else {
                return false
            }
        })
    },
    treeClick (data) {
        let ids = []
        if(data.id !== ''){
            ids.push(data.id)
            if(data.children !== null){
                data.children.forEach(item =>{
                    ids.push(item.id)
                })
            }
        }
        this.groupIds = ids
        this.findPage()
    },
    searchLayer () {
        this.groupIds = []
        this.findPage()
    },
    addLayerDialog () {
        this.detailEditType = 'add'
        this.dialogFormVisible = true
        this.findGroupList()
        this.layerForm = {}
    },
    fileSelect (index) {
        this.layerForm.icon = index + '.png'
        this.selectIconShow = false
    },
    inputBlur () {
        if (this.selecting === false) {
            this.selectIconShow = false
        }
    },
    close (data) {
        this.dialogFormVisible = data
    },
    addLayer (ruleAddForm) {
        this.$refs[ruleAddForm].validate((valid) => {
            if (valid) {
                let params = Object.assign({}, this.layerForm)
                geographicApi.addLayer(params).then((res) => {
                    if (res.data.messageType === '0') {
                        this.$notify({
                            title: '消息',
                            message: ('添加成功!'),
                            position: 'bottom-right',
                            showClose: false,
                            type: 'success'
                        })
                        this.dialogFormVisible = false
                        this.findPage()
                    }
                })
            } else {
                return false
            }
        })
    },
    updateLayer (ruleAddForm) {
        this.$refs[ruleAddForm].validate((valid) => {
            if (valid) {
                let params = Object.assign({ }, this.layerForm)
                geographicApi.updateLayer(params).then((res) => {
                    if (res.data.messageType === '0') {
                        this.$notify({
                            title: '消息',
                            message: ('修改成功!'),
                            position: 'bottom-right',
                            showClose: false,
                            type: 'success'
                        })
                        this.dialogFormVisible = false
                        this.findPage()
                    }
                })
            } else {
                return false
            }
        })
    },
    deleteLayer (row) {
        let tips = ''
        let id = row.id
        if (row) {
            tips = `此操作将删除: ${row.name}, 是否继续?`
        } else {
            return
        }
        this.$confirm(tips, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            geographicApi.deleteLayer(id).then((res) => {
                if (res.data.messageType === '0') {
                    this.$notify({
                        title: '消息',
                        message: ('删除成功！'),
                        position: 'bottom-right',
                        showClose: false,
                        type: 'success'
                    })
                    this.findPage()
                }
            })
        }).catch((error) => {
            console.log(error)
        })
    },
  }
}
</script>
<style lang="less" scoped>
  .containerWrap{
    display: flex;
  }
  .leftNaV{
    margin-left: 3px;
    box-sizing: border-box;
    color: #FFFFFF;
    width: 13%;
    min-width: 250px;
    background: rgba(24, 32, 45, 0.2);
    height: calc(100vh - 112px);
    border:1px solid rgba(0,245,255,0.5);
    position: relative;
    & /deep/ .cornerTopLeft{
      left: -2px;
      top: -2px;
    }
    & /deep/ .cornerTopRight{
      top: -2px;
      right: -2px;
    }
    & /deep/ .cornerBottomLeft{
      bottom: -2px;
      left: -2px;
    }
    & /deep/ .cornerBottomRight{
      bottom: -2px;
      right: -2px;
    }
    .tree{
      padding-top: 10px;
      padding-left: 5px;
      & /deep/ .el-tree-node__content{
        font-size: 16px;
      }
      & /deep/.el-tree-node__expand-icon{
        font-size: 20px;
      }
      & /deep/.el-button--text{
        margin-left: 5px;
        color: white;
      }
      & /deep/.el-button--text:hover{
       color: #F56C6C;
      }
    }
  }
  .rightContent{
    margin-left: 2%;
    width: 83%;
    height: calc(100vh - 112px);
    .scollWrap {
      margin-top: 2%;
      height: calc(100vh - 223px);
      .forms {
        height: calc(100vh - 225px);
        padding-right: 2%;
        box-sizing: border-box;

        .tableLine {
          height: calc(100vh - 266px);
          & /deep/ .el-scrollbar__wrap {
            overflow-y: scroll;
            overflow-x: hidden;
            height: 100%;
          }

          & /deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
            background: none;
          }

          & /deep/ .el-table__fixed-right::before, .el-table__fixed::before {
            background: none;
          }
        }
      }

      table.table-all tr td {
        border: 1px solid #D3D3D3;
      }
      & /deep/ .el-scrollbar__wrap {
        overflow-y: auto;
        overflow-x: hidden;
      }
    }
  }
  .el-inputs{
    background-color: #32f1ff16;
    border: 1px solid #FFF;border-radius: 4px;
  }
  hr {
    border: none;
    height: 1px;
    margin: 0 20px 15px 20px;
    background-color: #33a1bf;
  }
  .icon{
    width: 50px;
    height: 50px;
    float: left;
  }
  .header {
    height: 45px;
    display: flex;
    flex-direction: row;
    margin: 20px 0 20px 0;
    .handle {
      width: 80px;
      margin-left: 5px;
      margin-right: 50px;
    }
    .btn {
      width: 80px;
      cursor: pointer;
      border: none;
      padding: 10px;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      background: rgba(14, 107, 183, 0.9);
      margin-left: 35px;
      border-right: 0;
    }
    .search {
      width: 200px;
      height: 45px;
      font-size: 22px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      .p-frame {
        -webkit-appearance: none;
        background-color: transparent;
        background-image: none;
        border-radius: 0;
        color: #FFF;
      }
      & /deep/ .el-input__inner  {
        color: #FFFFFF;
        font-size: 1.5rem;
        height: 45px;
        background-color: transparent;
        border: 1px solid #0E6BB7;
        outline: 0;
        border-radius: 0;
      }
    }
  }
  .footer {
    margin-top: 32px;
    color: #ffffff;
    font-size: 16px;

    .info {
      .select {
        width: 52px;
        height: 35px;
      }

      .select /deep/ .el-input__inner {
        padding-left: 5px;
        padding-right: 0;
      }

      .select /deep/ .el-input__icon {
        width: 15px;
      }

      .select /deep/ .el-select__caret {
      }

      .select /deep/ .el-select__caret.is-reverse {

      }
    }

    .paging {
      text-align: right;
      padding-right: 30px;
      margin-top: -20px;

      & /deep/ .el-pagination.is-background .btn-prev {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination.is-background .btn-next {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pager li {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination__total, & /deep/ .el-pagination__sizes {
        float: left;
        font-size: 1.6rem;
        height: 35px;
        line-height: 35px;
      }

      & /deep/ .el-input__inner {
        height: 35px;
      }

      & /deep/ .el-input .el-input__inner {
        padding-right: 20px;
        color: #FFFFFF;
        font-size: 1.6rem;
      }
    }
  }
</style>
<style lang="less">
  /**
   * 修改样式   覆盖默认的饿了么全局样式
   */
  .el-form-item__label {
    padding: 0 20px 0 0 !important;
  }
  .scroll .page-component_scroll{
    height: 100% !important;
  }
  .scroll .page-component_scroll .page-scrollba_wrap{
    overflow-y: auto !important;
  }
  .scroll .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
</style>
